<template>
    <div>
        <el-form :model="form" ref="account" :label-width="formLabelWidth" :rules="rules" @submit.native.prevent style="box-sizing: border-box;padding: 10px;">
            <el-form-item label="金额" prop="money">
                <el-input v-model="form.money" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="积分">
                <el-input v-model="form.score" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="form.remark" type="textarea" :rows="2" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" :loading="btnLoading" @click.prevent.stop="onSubmit">确定</el-button>
            </el-form-item>
        </el-form>
        <verify-pwd ref="verifyPwd" @verify="onReduce"></verify-pwd>
    </div>
  
</template>

<script>
    import {mapState} from "vuex";
    import VerifyPwd from "@/components/MemberCard/VerifyPwd.vue";
    import {getLodop} from '@/plugins/LodopFuncs' //导入模块
    export default {
        name: "Charging",
        components: {
            VerifyPwd
        },
        props: {
            value: {
                type: Boolean,
                default: false
            },
        },
        computed: {
            // ...mapState({
            //     current: state => state.card.current,
            // }),
        },
        data() {
            var validateMoney = (rule, value, callback) => {
                console.log(typeof value)

                if(isNaN(parseInt(value))){
                    callback(new Error('请输入格式金额'));
                }else if(value === 0){
                    callback(new Error('请输入金额'));
                }else {
                    callback();
                }
            };
            return {                
                formLabelWidth: '100px',
                form: {
                    id:'',
                    type: -1,
                    money: 0,
                    score: 0,
                    remark: '',
                },
                btnLoading:false,
                rules: {
                    // money: [
                    //     { validator: validateMoney, trigger: 'blur' }
                    // ]
                },
                current: {
                    card_sn: '11',
                    name: '111',
                    mobile: '111',
                    money: '111',
                    score: '111',
                    remark: '111'
                }
            }
        },
        mounted() {
            console.log(this.$refs['verifyPwd'])
        },
        methods: {
            initForm() {
                this.form = {
                    id: '',
                    type: -1,
                    money: 0,
                    score: 0,
                    remark: ''
                }
            },
            onSubmit() {
                this.$refs['account'].validate((valid) => {
                    if (valid) {
                        if (!this.current) {
                            this.$message({type: 'error', message: '未选择有效会员卡,刷新再试'});
                            return
                        }
                        this.btnLoading = true
                        this.form.id = this.current.id

                        if(!this.$refs['verifyPwd'].onCheck(this.current.id)){
                            this.onReduce()
                        }                        
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //扣款
            onReduce(flag = true) {                
                if(flag === false){
                    this.btnLoading = false
                    return
                }
                this.$http.post('/api/accounts/change', this.form).then(ret => {
                    this.$store.dispatch('card/fetchMemberCard')
                    this.initForm()
                    this.$message({type: 'success', message: '操作成功'});
                    this.btnLoading = false
                    this.printShopReceipt(ret.data)
                }).catch(() => {
                    this.btnLoading = false
                })
            },
            //打印充值小票
            printShopReceipt(data) {
                let print_receipt = this.$setting.print_receipt
                if (print_receipt > 0) {
                    let LODOP = getLodop()//调用getLodop获取LODOP对象
                    //LODOP.SET_PRINT_PAGESIZE(0, 760, 800, 'TICKET');
                    let position = this.$setting.print_receipt_position
                    let top = position.top ? position.top : 0
                    let left = position.left ? position.left : 15
                    let font = position.font ? position.font : 12

                    LODOP.PRINT_INIT("");
                    LODOP.SET_PRINT_STYLE("FontSize", font);
                    LODOP.ADD_PRINT_TEXT(top, left, 200, 20, '会员卡号: ' + data.card_sn);
                    LODOP.ADD_PRINT_TEXT(top + 20, left, 200, 20, '会员姓名: ' + data.card.name);
                    LODOP.ADD_PRINT_TEXT(top + 40, left, 200, 20, '联系电话: ' + data.card.mobile);
                    LODOP.ADD_PRINT_TEXT(top + 60, left, 200, 20, '本次消费: ' + data.money);
                    LODOP.ADD_PRINT_TEXT(top + 80, left, 200, 20, '卡内余额: ' + data.card.money);
                    LODOP.ADD_PRINT_TEXT(top + 100, left, 200, 20, '会员积分: ' + data.card.score);
                    LODOP.ADD_PRINT_TEXT(top + 120, left, 400, 20, '消费时间: ' + data.created_at);
                    LODOP.PRINT()
                }
            },
        }
    }
</script>

<style scoped>

</style>